<template>
  <div class="home">
    <!-- 首图 -->
    <div class="banner pt42">
      <div class="banner_img">
        <img
          class="banner_img_img"
          src="@/assets/product_page_title/toppage_img@2x.png"
          alt=""
        />
      </div>
      <ul class="banner_warp_item">
        <li class="banner_warp_item_h2">
          <h2>51出海</h2>
        </li>
        <li class="banner_warp_item_h2">
          <h2>海外引流增长与营销工具</h2>
        </li>
        <li class="banner_warp_item_p">
          <p>WhatsApp、Facebook、LINE、Telegram等多平台用户增长</p>
        </li>
        <li class="banner_warp_item_botton">
          <button class="banner_warp_item_bot">免费试用</button>
        </li>
      </ul>
    </div>

    <!-- 我们可以帮你实现 -->
    <solidx :solidData="handelList"></solidx>

    <!-- 我们的产品 -->
    <div class="home_rank">
      <div class="home_rank_item">
        <h2 class="home_rank_item_h2">我们的产品</h2>
        <!-- 上部分点击点击事件 -->
        <ul class="home_rank_item_ul tydisplay">
          <li
            :class="{ bgcolorq: cur == i }"
            class="home_rank_item_li"
            @click="changeTab(i)"
            v-for="(item, i) in arrTitle"
            :key="i"
          >
            <p>{{ item.one }}</p>
            {{ item.two }}
          </li>
        </ul>

        <!-- 下部分展示内容 -->
        <div class="home_rank_item_sys" v-if="handleValue == 0">
          <h2 class="home_rank_item_sys_h2">WhatsApp拓客系统</h2>
          <p class="home_rank_item_sys_p">
            基于WhatsApp通过群发等功能帮助客户获客
          </p>
          <div class="home_rank_item_sys_img">
            <img src="@/assets/product_page_title/1642062222(1).png" alt="" />
          </div>
          <ul class="home_rank_item_sys_ul tydisplay">
            <li
              class="home_rank_item_sys_li"
              v-for="(item, i) in autoList"
              :key="i"
            >
              <h2>{{ item.name }}</h2>
              <p>{{ item.content }}</p>
            </li>
          </ul>
          <div class="home_rank_item_sys_bottom">
            <a href="">了解产品 &nbsp;&rarr;</a>
          </div>
        </div>

        <div class="home_rank_item_sys" v-if="handleValue == 1">
          <h2 class="home_rank_item_sys_h2">Facebook拓客系统</h2>
          <p class="home_rank_item_sys_p">
            基于WhatsApp通过群发等功能帮助客户获客
          </p>
          <div class="home_rank_item_sys_img">
            <img src="@/assets/product_page_title/1642062222(1).png" alt="" />
          </div>
          <ul class="home_rank_item_sys_ul tydisplay">
            <li
              class="home_rank_item_sys_li"
              v-for="(item, i) in autoList"
              :key="i"
            >
              <h2>{{ item.name }}</h2>
              <p>{{ item.content }}</p>
            </li>
          </ul>
          <div class="home_rank_item_sys_bottom">
            <a href="">了解产品 &nbsp;&rarr;</a>
          </div>
        </div>

        <div class="home_rank_item_sys" v-if="handleValue == 2">
          <h2 class="home_rank_item_sys_h2">51出海客服系统</h2>
          <p class="home_rank_item_sys_p">
            基于WhatsApp通过群发等功能帮助客户获客
          </p>
          <div class="home_rank_item_sys_img">
            <img src="@/assets/product_page_title/1642062222(1).png" alt="" />
          </div>
          <ul class="home_rank_item_sys_ul tydisplay">
            <li
              class="home_rank_item_sys_li"
              v-for="(item, i) in autoList"
              :key="i"
            >
              <h2>{{ item.name }}</h2>
              <p>{{ item.content }}</p>
            </li>
          </ul>
          <div class="home_rank_item_sys_bottom">
            <a href="">了解产品 &nbsp;&rarr;</a>
          </div>
        </div>

        <div class="home_rank_item_sys" v-if="handleValue == 3">
          <h2 class="home_rank_item_sys_h2">海外引流推广</h2>
          <p class="home_rank_item_sys_p">
            基于WhatsApp通过群发等功能帮助客户获客
          </p>
          <div class="home_rank_item_sys_img">
            <img src="@/assets/product_page_title/1642062222(1).png" alt="" />
          </div>
          <ul class="home_rank_item_sys_ul tydisplay">
            <li
              class="home_rank_item_sys_li"
              v-for="(item, i) in autoList"
              :key="i"
            >
              <h2>{{ item.name }}</h2>
              <p>{{ item.content }}</p>
            </li>
          </ul>
          <div class="home_rank_item_sys_bottom">
            <a href="">了解产品 &nbsp;&rarr;</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 我们的优势 -->
    <advantage :advantage="tageList"></advantage>

    <!-- 客户案例 + 轮播 -->
    <khcase :lbata="lblist"></khcase>

    <!-- 51出海 -->
    <gotosea :sealist="seaData"></gotosea>

    <!-- 出海资讯 -->
    <outsea :lbata="seaHandel"></outsea>
  </div>
</template>

<script>
import solidx from "@/components/solidx"; //我们可以帮你实现
import advantage from "@/components/advantage"; //我们的优势
import khcase from "@/components/khcase"; //我们的优势+轮播
import gotosea from "@/components/gotosea"; //51出海
import outsea from "@/components/outsea"; //出海资讯+轮播

export default {
  name: "home",
  components: {
    solidx,
    advantage,
    khcase,
    gotosea,
    outsea,
  },
  data() {
    return {
      cur: 0,
      handleValue: 1,
      arrTitle: [
        {
          one: "WhatsApp",
          two: "拓客系统",
        },
        {
          one: "Facebook",
          two: "拓客系统",
        },
        {
          one: "51出海",
          two: "客服系统",
        },
        {
          one: "海外",
          two: "引流推广",
        },
      ],
      handelList: {
        title: "我们可以帮您实现",
        list: [
          {
            imgUrl: require("@/assets/Homepage_desktop/3D_global_get_user_img.png"),
            name: "全球客户获取",
            content: "获取全球指定地区活跃客户资源，进行有效广告曝光",
          },
          {
            imgUrl: require("@/assets/Homepage_desktop/fans_catch_img.png"),
            name: "自动粉丝引流",
            content: "引导海外粉丝到指定平台，如电商平台、独立站、社交私域等",
          },
          {
            imgUrl: require("@/assets/Homepage_desktop/int_customer_service_img.png"),
            name: "智能客户服务",
            content: "搭载实时翻译、增长数据统计、智能辅助回复功能的技术服务",
          },
        ],
      },
      autoList: [
        {
          name: "全球智能获客",
          content: "指定地区号码生成，智能筛选活跃WhatsApp用户",
        },
        {
          name: "推广消息群发",
          content: "日均10w+消息群发，多话术模板智能对话，提高转化率",
        },
        {
          name: "自动化养号",
          content: "大批量账号自动养号脚本，提高账号安全性",
        },
        {
          name: "API对接客服系统",
          content: "分配客服坐席，一控多号，快捷服务高效营销",
        },
      ],
      tageList: {
        title: "我们的优势",
        list: [
          {
            imgUrl: require("@/assets/Homepage_desktop/tecnology_team_img.png"),
            name: "技术团队",
            content:
              "深耕海外流量七年的技术团队,自主研发诸如Facebook、WhatsApp、TikTok、Telegram、Instagram、Twitter等海外平台底层协议技术",
          },
          {
            imgUrl: require("@/assets/Homepage_desktop/marketing_system_img.png"),
            name: "营销体系",
            content:
              "51出海团队自搭建起一直在为海外引流营销实战商家提供服务，积累了丰富的海外营销经验，为客户提供最专业的业务咨询",
          },
          {
            imgUrl: require("@/assets/Homepage_desktop/global_customerservice_img.png"),
            name: "客户服务",
            content:
              "我们非常注重客户的售后服务，无论客户位于全球任意时区，都可以随时找我们的客服对接解决问题",
          },
        ],
      },
      lblist: {
        theme: "客户案例",
        imgUrl: require("@/assets/Homepage_desktop/client_case_hand_shake_img.png"),
        list: [
          {
            img: require("@/assets/Product_page_whatsapp_desktop/user_comment_image1.png"),
            title: "虚拟产品卖家",
            param:
              "我们做虚拟产品的要做常规推广限制很多，51出海团队为我们提供了WhatsApp群发技术，让我们可以稳定地找到客户源。",
          },
          {
            img: require("@/assets/Product_page_whatsapp_desktop/user_comment_image2.png"),
            title: "独立站站长",
            param:
              "一直想找到个低成本又有效的推广方法。与51出海合作把WhatsAPP私域做起来后，我们做持续的复购，把成本摊得比纯投推广更低，效果显著。",
          },
          {
            img: require("@/assets/Product_page_whatsapp_desktop/user_comment_image3.png"),
            title: "亚马逊服装店长",
            param:
              "我们通过51出海的Facebook拓实做站外推广，逐渐积攒下了一大批FB和WS的私域粉丝。多亏了这个操作，我们抵抗住了封店潮的风险。",
          },
        ],
      },
      seaData: {
        title: "51出海",
        twotitle: "转为跨境流量服务",
        imgUrl: require("@/assets/Homepage_desktop/data_pie_img.png"),
        list: [
          {
            name: "触达国家",
            num: "200",
            geshu: "个",
            fuhao: "+",
          },
          {
            name: "触达用户",
            num: "20",
            geshu: "亿",
            fuhao: "+",
          },
          {
            name: "日均拓客",
            num: "10",
            geshu: "万",
            fuhao: "+",
          },
          {
            name: "服务客户",
            num: "50000",
            geshu: "个",
            fuhao: "+",
          },
        ],
      },
      seaHandel: {
        theme: "出海资讯",
        list: [
          {
            img: require("@/assets/news.png"),
            title: "如何正确使用翻译软件，以下技巧请查阅后使用",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确使用翻译软件，以下技巧请查阅后使用",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择...",
          },
          {
            img: require("@/assets/news.png"),
            title: "如何正确使用翻译软件，以下技巧请查阅后使用",
            param:
              "51客服系统的WhatsApp、LINE客服聊天端，对接全球顶尖互联网公司翻译数据库，支持全球200+数语言互相翻译，系统自动侦测源语言，只需选择...",
          },
        ],
      },
    };
  },
  methods: {
    changeTab(value) {
      this.cur = value;
      this.handleValue = value;
    },
  },
};
</script>

<style scoped>
.bgcolorq {
  color: #1d2845;
}
.tydisplay {
  display: flex;
}
/* 首图 */
.banner {
  padding: 67px 15px 15px 15px;
  box-sizing: border-box;
  background: -webkit-gradient(
    linear,
    0 0,
    100% 100%,
    from(#f0f8ff),
    to(#f8eeff)
  );
}
.banner_img {
  text-align: center;
}
.banner_img_img {
  width: 85%;
}
.banner_warp_item {
  padding-top: 15px;
}
.banner_warp_item_h2 {
  color: #1d2845;
  font-size: 1.3em;
  text-align: center;
  margin-top: 10px;
}
.banner_warp_item_p > p {
  color: #6f7b8e;
  font-size: 1.3em;
  padding: 16px 40px;
  text-align: center;
  line-height: 25px;
}
.banner_warp_item_botton {
  text-align: center;
  margin: 10px 0;
}
.banner_warp_item_bot {
  background: #077af1;
  outline: none;
  padding: 8px 80px;
  border-radius: 6px;
  color: #fff;
  border: none;
  font-size: 1.1em;
}
/* 我们的产品 */
.home_rank {
  background: #f8f8f8;
  padding: 30px 15px 30px 15px;
}
.home_rank_item_h2 {
  color: #14203e;
  font-size: 1.8em;
  text-align: center;
}
.home_rank_item_ul {
  color: #6f7b8e;
  font-size: 1.2em;
  justify-content: space-between;
  margin: 30px 0;
}
.home_rank_item_li {
  width: 22%;
  text-align: center;
  font-weight: bold;
}
.home_rank_item_sys {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px 0 rgb(102 102 102 / 20%);
  color: #1d2845;
  padding: 28px 15px;
}
.home_rank_item_sys_h2 {
  font-size: 1.5em;
  text-align: center;
}
.home_rank_item_sys_p {
  text-align: center;
  font-size: 1.2em;
  color: #6f7b8e;
  margin: 15px 0;
}
.home_rank_item_sys_img > img {
  width: 100%;
}
.home_rank_item_sys_ul {
  margin-top: 15px;
  justify-content: space-around;
  flex-wrap: wrap;
}
.home_rank_item_sys_li {
  width: 40%;
  padding: 10px 0;
}
.home_rank_item_sys_li > h2 {
  font-size: 1.2em;
}
.home_rank_item_sys_li > p {
  font-size: 1em;
  color: #6f7b8e;
  padding-top: 10px;
}
.home_rank_item_sys_bottom {
  text-align: center;
  margin-top: 15px;
}
.home_rank_item_sys_bottom > a {
  color: #077af1;
  font-size: 1em;
  font-weight: bold;
}
</style>
